//组件要求暴露出使用时传进来的参数/方法等
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { View, Text, TouchableOpacity } from 'react-native'

export default class TimerButton extends Component {
  constructor(props) {
    super(props)
    this.state = {
      timerCount: this.props.timerCount || 90, //倒计时时间
      timerTitle: this.props.timerTitle || '获取验证码', //倒计时按键的提示时间
      counting: false, //是否开始倒计时，还提示点击反馈（主要还是简单交互）
      selfEnable: true //此是否可点击
    }

    this._shouldStartCountting = this._shouldStartCountting.bind(this)
    this._countDownAction = this._countDownAction.bind(this)
  }
  //规定类（这个组件）的属性类型，使用时可定义这些属性
  static propTypes = {
    style: PropTypes.object, //此属性的基本类型   对象
    textStyle: Text.propTypes.style,
    onClick: PropTypes.func,
    disableColor: PropTypes.string,
    timerTitle: PropTypes.string,
    //enable: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.number])
    enable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number])
  }

  //倒计时时的时间显示，
  _countDownAction() {
    const codeTime = this.state.timerCount
    this.interval = setInterval(() => {
      const timer = this.state.timerCount - 1
      if (timer === 0) {
        //this.interval作用：1、此组件在被卸载的时候，所有有关定时器相关的事件就会自动清除；2、方便找到此定时器
        this.interval && clearInterval(this.interval)
        this.setState({
          timerCount: codeTime,
          timerTitle: this.props.timerTitle || '获取验证码',
          counting: false,
          selfEnable: true
        })
      } else {
        this.setState({
          timerCount: timer,
          timerTitle: `重新获取(${timer}s)` //字符串带有变量时，用模板符号
        })
      }
    }, 1000)
  }
  //是否开始倒计时，第一个判断手机号是否正确，第二个是否重复点击
  _shouldStartCountting(shouldStart) {
    if (this.state.counting) {
      return
    } //防止重复点击?
    if (shouldStart) {
      this._countDownAction()
      this.setState({
        counting: true,
        selfEnable: false
      })
    } else {
      this.setState({
        selfEnable: true
      })
    }
  }
  //组件卸载时，解除定时器
  componentWillUnmount() {
    clearInterval(this.interval)
  }
  render() {
    const { onClick, style, textStyle, enable, disableColor } = this.props
    const { counting, timerTitle, selfEnable } = this.state
    return (
      <TouchableOpacity
        activeOpacity={counting ? 1 : 0.5}
        onPress={() => {
          if (!counting && enable && selfEnable) {
            this.setState({ selfEnable: false })
            this.props.onClick(this._shouldStartCountting)
          }
        }}
      >
        <View
          style={[
            {
              width: 120,
              height: 40,
              justifyContent: 'center',
              alignItems: 'center'
            },
            {
              backgroundColor:
                !counting && enable && selfEnable
                  ? style.backgroundColor
                  : disableColor || 'gray'
            }
          ]}
        >
          <Text style={[{ fontSize: 14 }, textStyle]}>{timerTitle}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}
